前言

前幾天先完成了專案的規劃，也把接下來會使用到的開發工具整理好了。

今天終於要開始寫第一行程式碼。

在製作一個網頁之前，我們需要先了解最基本的技術：

HTML。

HTML 是建立網頁結構的基礎，所以今天就先從 HTML 開始，建立這次醫療資訊小系統的第一個頁面。

⸻

HTML 是什麼？

HTML 的全名是：

HyperText Markup Language

中文通常稱為「超文字標記語言」。

雖然名字裡有「語言」，但 HTML 並不是像 Java 或 JavaScript 那樣的程式語言。

它主要是用來描述一個網頁的結構。

例如：

• 標題
• 文字
• 圖片
• 按鈕
• 表格
• 表單

都可以透過 HTML 建立。

可以簡單把它想成：

HTML 負責決定網頁「有什麼」。

之後的 CSS 則會負責決定「長什麼樣子」，JavaScript 則會讓網頁「可以做什麼」。

⸻

建立第一個 HTML

首先建立一個新的檔案：

index.html

接著輸入最基本的 HTML 結構：

把檔案儲存之後，直接使用瀏覽器打開，就可以看到第一個網頁。

⸻

這些標籤是在做什麼？

第一次看到 HTML 可能會覺得有很多 < > 很複雜。

其實先掌握幾個基本標籤就可以了。

h1 是標題。

通常會用來放網頁最主要的標題。

⸻

p 代表 paragraph，也就是段落。

可以用來放一般文字。

⸻

這個標籤設定的是瀏覽器分頁上顯示的名稱。

它和 不太一樣。

h1 是顯示在網頁內容裡的標題，而 title 是瀏覽器分頁的標題。

⸻

建立病患資料頁面

既然這次的目標是製作醫療資訊小系統，那我們可以先讓第一個頁面有一點實際功能的樣子。

例如加入一個病患資料表格：

這樣就可以在網頁上看到一個非常簡單的病患資料表。

當然，現在這些資料都是我們自己寫進 HTML 裡的測試資料。

之後學到 MySQL 之後，就會讓資料從資料庫讀取，而不是直接寫死在網頁裡。

⸻

現在的系統還很簡單

做到這裡，其實距離真正的醫療資訊系統還很遠。

目前的架構比較像：

HTML
↓
顯示固定的資料

我們希望最後可以變成：

使用者
↓
網頁
↓
Java / Servlet
↓
MySQL
↓
取得病患資料
↓
顯示在網頁上

這也是接下來幾天會慢慢完成的事情。

⸻

今天的小結

今天正式開始寫這次專案的第一段程式碼。

透過 HTML，我先建立了醫療資訊小系統的基本頁面，也加入了一個簡單的病患資料表格。

雖然現在看起來還非常簡單，但這就是整個專案的第一步。

接下來會開始使用 CSS，讓目前只有文字和表格的頁面變得比較好看，也更接近一個真正的系統介面。

Day 4，完成！